<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>游币门户网站</title>
    
    <meta charset="utf-8"/>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	
	<link rel="stylesheet" href="gold/css/bootstrap.min.css">
	<link href="gold/css/jquery-accordion-menu.css" rel="stylesheet" type="text/css" />
	<link href="gold/css/font-awesome.css" rel="stylesheet" type="text/css" />
	<script src="gold/js/jquery.js"></script>
	<script src="gold/js/bootstrap.min.js"></script>
	<script src="gold/js/particles.js"></script>
	<script src="gold/js/app.js"></script>
	<style type="text/css">
		*{box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}
		.content{width:260px;margin:100px auto;}
		.filterinput{
			background-color:rgba(249, 244, 244, 0);
			border-radius:15px;
			width:90%;
			height:30px;
			border:thin solid #FFF;
			text-indent:0.5em;
			font-weight:bold;
			color:#FFF;
		}
		#demo-list a{
			overflow:hidden;
			text-overflow:ellipsis;
			-o-text-overflow:ellipsis;
			white-space:nowrap;
			width:100%;
		}
	</style>
	<style type="text/css">
		
		* {
			padding: 0;
			margin: 0;
		}
		
		ul {
			list-style: none;
		}
		
		.out {
			width: 350px;
			height: 245px;
			margin: 25px auto;
			position: relative;
		}
		
		.img li {
			position: absolute;
			top: 0px;
			left: 0px;
			display: none
		}
		
		.out .num {
			position: absolute;
			bottom: 0px;
			left: 0px;
			font-size: 0px;
			text-align: center;
			width: 100%;
		}
		
		.num li {
			width: 20px;
			height: 20px;
			background: #666666;
			color: #FFFFFF;
			text-align: center;
			line-height: 20px;
			display: inline-block;
			font-size: 16px;
			border-radius: 50%;
			margin-right: 10px;
			cursor: pointer;
		}
		
		.out .btn {
			position: absolute;
			top: 52%;
			margin-top: -30px;
			width: 45px;
			height: 60px;
			background: rgba(0, 0, 0, 0.5);
			color: #FFFFFF;
			text-align: center;
			line-height: 60px;
			font-size: 40px;
			display: none;
			cursor: pointer;
		}
		
		.out .num li.active-1 {
			background: #AA0000;
			margin-left:150px;
		}
		
		.out:hover .btn {
			display: block
		}
		
		.out .left {
			left: 0px;
		}
		
		.out .right {
			right: -150px;
		}
		#leftNav{
			margin-left:87px;
		}
		.test2{
			float: left;
		}
		.test1{
			float:right;
		}
		.zhong{
			text-align: center;
		}
	</style>
	<script src="gold/js/jquery-accordion-menu.js" type="text/javascript"></script>		

  </head>
  
  <body onload="getNowTime()">
    <div class="container">
		<nav class="navbar navbar-default" >
			<div class="navbar-header">
				<button type="button" class="navbar-toggle" data-toggle="collapse"
					data-target="#example-navbar-collapse">
					<span class="sr-only">切换导航</span> <span class="icon-bar"></span> <span
						class="icon-bar"></span> <span class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="gold/user/portal.jsp">游币手机下载门户网站</a>
			</div>
			<div class="collapse navbar-collapse" id="example-navbar-collapse">
				<ul class="nav navbar-nav">
					<li class="dropdown"><a href="gold/user/portal.jsp" id="time"></a></li>
				</ul>
				<ul class="nav navbar-nav navbar-right">
				
					<c:if test="${userLogin!=null}">
						<li class="dropdown"><a href="gold/user/portal.jsp">欢迎${userLogin.userName}</a></li>
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">个人中心<b class="caret"></b> </a>
							<ul class="dropdown-menu">
								<li><a data-toggle="modal"
									data-target="#myModal">密保卡充值</a></li>
								<li><a href="toPrepaidJsp.do">充值记录</a></li>
								<li><a href="toUserDetailJsp.do">账户信息</a></li>
								<li><a href="toExpenseJsp.do">消费记录</a></li>
								<li class="divider"></li>
								<li><a id="exit" onclick="exitSystem()">退出</a></li>
							</ul>
						</li>
					</c:if>
					
					<c:if test="${userLogin==null}">
						<c:if test="${guestLogin==null}">
							<script type="text/javascript">
								location.href = "gold/user/login.jsp";
							</script>
						</c:if>
						<c:if test="${guestLogin!=null}">
							<li class="dropdown"><a href="gold/user/login.jsp" >登录</a></li>
							<li class="dropdown"><a href="gold/user/register.jsp" >注册</a></li>
						</c:if>
					</c:if>
					
				</ul>
			</div>
		</nav>
	</div>
	
	<div class="modal fade" id="myModal" tabindex="-1" >
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="myModalLabel">密保卡充值</h4>
				</div>
				<div class="modal-body">
					<form class="form-horizontal" action="addCardAmount.do" 
					enctype="multipart/form-data" method="post">
						<div class="form-group">
							<label for="firstname" class="col-sm-2 control-label">卡号</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="cardNumber"
									name="cardNumber" placeholder="请输入卡号">
							</div>
						</div>
						<div class="form-group">
							<label for="lastname" class="col-sm-2 control-label">密码</label>
							<div class="col-sm-10">
									<input type="text" class="form-control" id="cardPwd"
									placeholder="请输入卡密码" name="cardPwd" />
							</div>
						</div>
						<div class="form-group">
							<div class="col-sm-offset-2 col-sm-10">
								<button type="submit" class="btn btn-default">确认充值</button>
							</div>
						</div>
						<input type="hidden" name="userIdString" value="${userLogin.userId}"/>
					</form>
				</div>

			</div>
		</div>
	</div>
				
				
	<div class="row" style="background-color:#CCC; 
	overflow:hidden;" onLoad="init()">
		<div class="col-md-12">
			<ul class="nav nav-pills col-md-offset-3" >
				<li class=><a href="gold/user/portal.jsp" class="btn btn-primary">首页</a></li>
		  		
		  		<c:forEach items="${gameTypePortalList}" var="gameType">
						<li><a href="toGameTypeJsp.do?gameType=${gameType.typeId}" class="btn btn-primary">${gameType.typeName}</a></li>
				</c:forEach>
		  		
	      		<li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li>
				<li>
					<select class="form-control" name="gameTypeId">
						<option value="0">默认</option>
						<c:forEach items="${gameTypeList}" var="gameType">
								<option value="${gameType.typeId}">${gameType.typeName}</option>
						</c:forEach>
					</select>
				</li>
				<li><input type="text" class="form-control" name="searchGame"/></li>
				<li><a id="search" class="btn btn-primary" onclick="searchGame()">查询</a></li>
    		</ul>
		</div>
    </div>
    
    
	<div id="nail1" class="container">
		<div class="row">
			<div class="col-md-6 ">
				<div class="out">
					<!--上面-->
					<ul class="img">
					
						<c:forEach items="${gameList}" var="game">
							<li>
								<a href="toGameDetailJsp.do?gameId=${game.gameId}">
								<img src="/file/game/screen/${game.gameScreen.split('[*]')[1]}" width="500"
								height="300" alt="" />
								</a>
							</li>
						</c:forEach>
						
					</ul>
					<!--下面-->
					<ul class="num">
					</ul> 
					<div class="left btn">&lt;</div>
					<div class="right btn">&gt;</div>
				</div>
			</div>
			<div class="col-md-5 col-md-offset-1">
				
				<div class="row">&nbsp;</div>
				<table class="table">
   					<thead>
     				 	<tr>
         			 		<th>新闻公告</th>
      				 	</tr>
   					</thead>
   					<tbody>
      					<tr>
        					<td><a href="gold/user/portal.jsp">劳动节优惠先知</a></td>
      					</tr>
      					<tr>
         					<td><a href="gold/user/portal.jsp">情人节优惠放送</a></td>
      					</tr>
      					<tr>
         					<td><a href="gold/user/portal.jsp">定时充值返现活动</a></td>
      					</tr>
      					<tr>
         					<td><a href="gold/user/portal.jsp">体育竞技类游戏更新</a></td>
      					</tr>
      					<tr>
         					<td><a href="gold/user/portal.jsp">棋牌类游戏折扣活动</a></td>
      					</tr>
      					<tr>
         					<td><a href="gold/user/portal.jsp">直辖市优惠活动</a></td>
      					</tr>
      					<tr>
         					<td>&nbsp;</td>
         					<td><a href="gold/user/portal.jsp">更多</a></td>
      					</tr>
   					</tbody>
   				</table>
			</div>
		</div>
		<div class="row">&nbsp;</div>
		<div class="row">&nbsp;</div>
		<div class="row">
			<div class="col-md-12 ">
				<div id="leftNav" class="col-md-2">
					<div id="jquery-accordion-menu" class="jquery-accordion-menu red">
					
						<div class="jquery-accordion-menu-header" id="form"></div>
						
						<ul id="demo-list">
						
							<c:forEach items="${gameTypePortalList}" var="gameType">
					      		<li><a href="toGameTypeJsp.do?gameType=${gameType.typeId}"><img width="50px" src="/file/gametype/${gameType.typePicture}"/>&nbsp;${gameType.typeName}</a></li>
							</c:forEach>
							
				      		<li>
				      			<a href="gold/user/portal.jsp"><i class="fa fa-suitcase"></i>更多类型 </a>
								<ul class="submenu">
				          			<c:forEach items="${gameTypePortalMoreList}" var="gameType">
					      				<li><a href="toGameTypeJsp.do?gameType=${gameType.typeId}"><img width="50px" src="/file/gametype/${gameType.typePicture}"/>&nbsp;${gameType.typeName}</a></li>
									</c:forEach>
								</ul>
							</li>
						</ul>
				
						<div class="jquery-accordion-menu-footer">
							&nbsp;
						</div>
					</div>
				</div>
				<div id="nail2" class="col-md-8 col-md-offset-1 test1">
					<div class="row"><div class="col-md-6"><h2>热销商品</h2></div></div>
					
					<c:forEach items="${gameList}" var="game">
						<div class="col-md-4 col-sm-6 test2">
							<div class="thumbnail">
								<img src="/file/game/${game.gameCover}" width="150" height="150px" alt="">
								<div class="caption zhong"><h3>${game.gameName}</h3>
									<p><a href="toGameDetailJsp.do?gameId=${game.gameId}" class="btn btn-primary zhong">游戏详情</a></p>
								</div>
							</div>
						</div>
					</c:forEach>
					
				</div>

			</div>
		</div>

	</div>

	<div class="row">
		<div class="container">
			<hr/>
			<div class="col-md-4 col-md-offset-5">
			&copy;2016-2017 portal.com 版权所有
			</div>
		</div>	
	</div>
	
	<script type="text/javascript">
		$(function(){
			getHotGame();
		});
		
		function exitSystem(){
			var v1 = confirm("确认退出吗？");
			if(v1){
				//location.href="exitUserSystem.do";
				$("#exit").attr("href","exitUserSystem.do");
			}
		}
		
  		function getNowTime(){
  			var date = new Date();
	  		$("#time").text(date.toLocaleDateString()+"-"+date.toLocaleTimeString());
	  		setTimeout(getNowTime,1000);
	  	}
  		
  		function getHotGame(){
  			$.ajax({
  				url:"getHotGame.do",
  				type:"post"
  			});
  		}
  		
  		function searchGame(){
  			var v1 = $("select[name='gameTypeId']").val();
  			var v2 = $("input[name='searchGame']").val();
  			var v3 = "searchGame.do?gameName="+v2+"&gameType="+v1;
  			$("#search").attr("href",v3);
  			//location.href = "searchGame.do?gameName="v2+"&gameType="v1;
  		}
	</script>


	<script type="text/javascript">
		$(function(){
			
			$("#123").click(function(){
				$("#myModal").modal('hide');
			});
		});
		
		(function($) {
		$.expr[":"].Contains = function(a, i, m) {
			return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
		};
		function filterList(header, list) {
			//@header 头部元素
			//@list 无需列表
			//创建一个搜素表单
			var form = $("<form>").attr({
				"class":"filterform",
				action:"#"
			}), input = $("<input>").attr({
				"class":"filterinput",
				type:"text"
			});
			$(form).append(input).appendTo(header);
			$(input).change(function() {
				var filter = $(this).val();
				if (filter) {
					$matches = $(list).find("a:Contains(" + filter + ")").parent();
					$("li", list).not($matches).slideUp();
					$matches.slideDown();
				} else {
					$(list).find("li").slideDown();
				}
				return false;
			}).keyup(function() {
				$(this).change();
			});
		}
		$(function() {
			filterList($("#form"), $("#demo-list"));
		});
		})(jQuery);	
		jQuery(document).ready(function () {
			jQuery("#jquery-accordion-menu").jqueryAccordionMenu();
			
		});
		
		$(function(){	
			//顶部导航切换
			$("#demo-list li").click(function(){
				$("#demo-list li.active").removeClass("active");
				$(this).addClass("active");
			});	
		});
		
		$(".classname img").addClass("carousel-inner img-responsive img-rounded");
	
	</script>
	<c:if test="${msg!=null}">
  		<script type="text/javascript">
  			alert("${msg}");
  		</script>
  	</c:if>
  </body>
  	
</html>
